<template>
  <div>
    <el-row style="margin-top: 10px">
      <div v-for="(item,index) in workList" :key="index">
        <el-col :span="6" style="margin-top: 10px;margin-left: 35px">
          <el-card shadow="hover" style="text-align: left;background: #dddddd">
            <el-row>
              <el-col :span="12" style="margin-left: 10px;font-size: 8px;color: #a5a5a5">
                <div>作业名: <br>
                  <span style="font-size: 18px;font-weight: bold;color: black">{{ item.workName }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16" style="margin-top:10px;margin-left: 10px;font-size: 8px;color: #a5a5a5">
                <div>作业情况: <br>
                  <span v-if="item.submitStatus != null"
                        style="font-size: 16px;font-weight: bold;color: red">批阅情况 : {{ item.submitStatus }}</span>
                  <span v-else style="font-size: 16px;font-weight: bold;color: red">批阅情况 : 暂未信息</span>
                  <br><br>
                  <span v-if="item.submitGrade != null"
                        style="font-size: 16px;font-weight: bold;color: red;">作业分数 : {{ item.submitGrade }}</span>
                  <span v-else style="font-size: 16px;font-weight: bold;color: red;">作业分数 : 暂未信息</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="margin-left: 10px;margin-top: 10px;font-size: 8px;color: #a5a5a5">
                <div>发布时间: <br></div>
                <span style="font-size: 18px;font-weight: bold;color: black">{{ item.createTime }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="margin-left: 10px;margin-top: 10px;font-size: 8px;color: #a5a5a5">
                <div>开始时间: <br></div>
                <span style="font-size: 18px;font-weight: bold;color: black">{{ item.contentStartTime }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="margin-left: 10px;margin-top:10px;font-size: 8px;color: #a5a5a5">
                <div>结束时间: <br></div>
                <span style="font-size: 18px;font-weight: bold;color: black">{{ item.contentEndTime }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col>
                <el-button style="width: 100px;font-size: 12px" type="primary"
                           size="medium" icon="el-icon-s-order" @click="downWork(item.recordId)" round>下载作业
                </el-button>
                <el-button style="width: 100px;font-size: 12px;margin-left: 20px" type="primary"
                           size="medium" icon="el-icon-s-order" round @click="submitWork(item.recordId)">提交作业
                </el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </div>
      <el-dialog title="提交作业" :visible.sync="workDialog" width="400px" center>
        <el-row>
          <el-col :span="10" :offset="3" style="margin-top: 25px;">
            <el-upload
              class="upload-demo"
              ref="upload"
              action="/api/common/submit"
              accept=".txt"
              :file-list="fileList"
              :headers="{Authorization:this.$store.state.authorization}"
              :data="{recordId:this.currentRecord}"
              :on-success="handleSuccess"
              :auto-upload="false">
              <div slot="tip" class="el-upload__tip">只能上传txt文件</div>
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitUpload">提 交</el-button>
        </div>
      </el-dialog>

    </el-row>
  </div>
</template>

<script>
export default {
  name: 'StudentWork',
  data () {
    return {
      courseId: undefined,
      studentId: undefined,
      workList: [],
      fileList: [],
      currentRecord: undefined,
      workDialog: false
    }
  },
  methods: {
    submitWork (recordId) {
      this.workDialog = true;
      this.currentRecord = recordId;
    },
    cancel () {
      this.workDialog = false
      this.$refs.upload.clearFiles()
    },
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleSuccess () {
      this.$notify.success('上传成功')
      this.cancel()
    },
    downWork (recordId) {
      window.location.href = 'http://localhost/common/download/work/' + recordId
    },
    init () {
      this.$http({
        url: '/api/workRecord/studentRecordList/' + this.courseId + '/' + this.studentId,
        method: 'get',
      }).then((res) => {
        this.workList = res.data.result
      })
    }
  },
  created () {
    this.courseId = this.$store.state.course.courseId
    this.studentId = this.$store.state.user.id
    this.init()
  }
}
</script>

<style scoped>

</style>
